<%@ page contentType="text/html; charset=UTF-8" %>
<%@ page isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@page import="java.lang.String"%>
<%
    String activitiImgPath = request.getContextPath();
%>
<html>
<style>
    .word{width:200px;margin:2px auto;padding:2px 0;}
    .test{word-wrap: break-word;white-space: pre-wrap; }

    .activitiHide{display: none}
    .activiti_setButton_class:hover {border-radius: 5px;background-color: rgba(45, 183, 245, .2);border: 1px solid #7AC7F8;color: #3dadf2;box-shadow: 0 0 0 2px rgba(45, 183, 245, .2);}
    .activiti_setButton_class{text-align: center;padding:5px 10px;width: 90px;font-size: 18px;border-radius: 5px;border: 1px solid #3dadf2;margin-bottom: 15px;}
    table{border-collapse:collapse;border-spacing: 0;}
    .activiti_tablelist_class{border:solid 1px #cbcbcb; width:100%; clear:both;}
    .activiti_tablelist_class th{background:url(<%=activitiImgPath%>/images/th.gif) repeat-x; height:40px; line-height:40px; border-bottom:solid 1px #b6cad2; text-indent:11px; text-align:center;}
    .activiti_tablelist_class td{line-height:35px; text-indent:11px; border-right: dotted 1px #c7c7c7;}
    .activiti_tablelist_class tbody tr.odd{background:#f5f8fa;}
    .activiti_tablelist_class tbody tr:hover{background:#e5ebee;}
    .activiti_tablelist_class {border: none;}
    .activiti_tablelist_class th {background: none;border-bottom: none;}
    thead {background: #ecf2fc}
    /*.activiti_tablelist_class tr td:nth-child(1){color: #0a0a0a}*/

    .activiti_tablelist_class th {height: 45px;}
    .activiti_tablelist_class tr {height: 55px;}

    .activiti_tablelist_class td {border-right: none}
    #actviti_task_taskinfo td {border-right: #cccccc 1px solid;}
    .activiti_tablelist_class thead tr {border: #cccccc 1px solid;}
    .activiti_tablelist_class tbody tr {border: #e5e5e5 1px solid;}
    .activiti_tablelist_class tfoot tr {border: #cccccc 1px solid;}
    /*背景*/
    .activiti_back_blue{background:#f7faff}
    .activiti_back_lineblue{background:#ecf2fc}
    td{text-align: center}
    h2{text-align: center;margin-top: 50px}
</style>

<body class="activitiHide">

    <div style="padding: 10px;">

        <a id="activti_setButton_id"class="activiti_setButton_class"style="float: right;cursor:hand;"onclick="lookActivitiImg()">
            查看列表
        </a>
    </div>
    <div id="flowImageAndRect"class = ""style="padding: 5px">

    </div>

    <div id="activiti_info_div_id"class = "activitiHide" style="font-size: 12px;text-align: center;">


        <div class="bubble_tooltip_common" id="bubble_tooltip">
            <label class="triRight"></label>
            <label class="triRightInner"></label>
            <span id="bubble_tooltip_content"></span>
        </div>
        <table class="activiti_tablelist_class" id="actviti_task_table" style="width: 100%;white-space:nowrap;">
            <thead>
            <tr>
                <th align="center">流程名称</th>
                <th>指定审核人</th>
                <th>审核人</th>
                <th width="190px">审核意见</th>
                <th>申请时间</th>
                <th>审核时间</th>
            </tr>
            </thead>
            <tbody id="actviti_task_table_body"style="margin-bottom: 10px">

            </tbody>
            <%--<tr style="height: 20px"></tr>
            <tfoot id="actviti_task_taskinfo"style="margin-top: 10px">

            </tfoot>--%>
        </table>
    </div>
</body>

</html>
<script type="text/javascript" src="<%=activitiImgPath%>/easyUI1.4.1/jquery.min.js"></script>
<script>

    var baseURL = "<%=activitiImgPath%>/DrivingSys/activiti/";

    $(function(){

        $("#activti_setButton_id").text('查看列表');
        $("#activiti_info_div_id").addClass("activitiHide");
        $("#flowImageAndRect").removeClass("activitiHide");

        /*$("#activiti_info_div_id").removeClass("activitiHide");
        $("#flowImageAndRect").addClass("activitiHide");*/

        //$("#activitiImgJSP_window_div").attr("style","width:900px;height:530px;");
        //$('#activitiImgJSP_window_div').window('open');

        var pid = '${pid}'; // 流程实例的ID

        var fnumberName = '${fnumberName}';

        var fnumber = '${fnumber}';
        console.log(fnumber);

        console.log(pid);
        var $flowImageAndRect = $('#flowImageAndRect');
        //$('#processKey').html('流程实例的ID --> ' + pid);
        // 加载流程图片
        loadProcessImage(pid,$flowImageAndRect);

        // 流程列表
        loadProcessTrace(fnumberName,fnumber);


    });
    /**
     * 加载图片
     */
    function loadProcessImage(pid,$flowImageAndRect){
        // debugger;
        var imageUrl = baseURL+'getActivitiProccessImage?pProcessInstanceId=' + pid;
        console.log(imageUrl)
       // console.log(imageUrl)
        // 加载图片
        $('<img />',{
            "src" : imageUrl,
            "alt" : '',
            "width":'850px'
        }).appendTo($flowImageAndRect);
    }
    /**
     * 加载流程中各节点的信息
     * @param pid : 流程定义的key
     * @param $flowImageAndRect
     */
    function loadProcessTrace(fnumberName,fnumber){
       // console.log(baseURL+'myget');
        $.ajax({
            url:baseURL+'getHistroyTaskByPid',
            type: "post",
            dataType:"json",
            data:{"fnumberName":fnumberName,"fnumber":fnumber},
            success: function(data2) {
                console.log(data2);
                if(data2.length<1)
                {
                    $("body").html("<h2>没有流程</h2>")

                }else{

                    var info = '';

                    var creatUser,creatBegTime,creatEndTime = '';

                    for( i = 0; i < data2.length; i++)
                    {


                        if(data2[i].startUserId != 'undefined' && data2[i].startUserId != undefined){
                            info +='<tr><td class="activiti_back_lineblue">流程发起人</td><td>'+getStr(data2[i].startUserId)+'</td>' +
                                '<td  class="activiti_back_lineblue">流程开始时间</td><td>'+getStr(data2[i].startTime)+'</td>' +
                                '<td  class="activiti_back_lineblue">流程结束时间</td><td>'+getStr(data2[i].endTime)+'</td></tr>' ;
                            info +='<tr style="height: 20px"></tr>';
                        }
                        else
                        {
                            //节点名称
                            if(i%2 != 1)
                            {
                                info +='<tr class="activiti_back_blue">';
                            }else{
                                info +='<tr class="sharecarsub">';
                            }
                            info +='<td>'+getStr(data2[i].name,true)+'</td>';
                            //经办人
                            info +='<td>'+getStr(data2[i].assignee,true) +'</td>';
                            //审核人
                            info +='<td>'+getStr(data2[i].commonUserName,true)+'</td>';
                            //审核意见
                            info +='<td>'+getStr(data2[i].commonFullMessage,true)+'</td>';

                            //开始时间
                            info +='<td>'+getStr(data2[i].startTime,false) +'</td>';
                            //审核时间
                            info +='<td>'+getStr(data2[i].commonTime,false)+'</td>';


                        }




                        


                        //结束时间
                        //info +='<td>'+getStr(data2[i].endTime,false)+'</td></tr>';
                        //info +='<tr><td></td></tr>';
                    }
                    /*var actviti_task_taskinfo =
                        '<tr><td class="activiti_back_lineblue">流程发起人</td><td>'+getStr(creatUser)+'</td>' +
                        '<td  class="activiti_back_lineblue">流程开始时间</td><td>'+getStr(creatBegTime)+'</td>' +
                        '<td  class="activiti_back_lineblue">流程结束时间</td><td>'+getStr(creatEndTime)+'</td></tr>' ;*/

                    //var json = eval("(" + json + ")")
                    $("#actviti_task_table_body").append(info);
                    //$("#actviti_task_taskinfo").append(actviti_task_taskinfo);
                }
                //$("#actviti_task_taskinfo").append(actviti_task_taskinfo);
                //$("body").html("<h2>服务器异常，请重试</h2>")
                $("body").removeClass("activitiHide");
            },error:function(){
                $("body").removeClass("activitiHide");
                $("body").html("<h2>服务器异常，请重试</h2>");
            }
        });
    }
    //显示和隐藏
    function lookActivitiImg() {

        if($("#activti_setButton_id").text() == '查看流程图'){
            $("#activti_setButton_id").text('查看列表');
            $("#activiti_info_div_id").addClass("activitiHide");
            $("#flowImageAndRect").removeClass("activitiHide");
        }else{
            $("#activti_setButton_id").text('查看流程图');
            $("#activiti_info_div_id").removeClass("activitiHide");
            $("#flowImageAndRect").addClass("activitiHide");
        }

    }
    function getStr(str ,flag){
        if(str != null && str != 'null' && str != undefined && str != 'undefined'){
            if(flag && str.length >10)
            {
                //return '<div class="showTitleLeftClass"><p onmouseover="showToolTip(event,\''+str+'\')" onmouseout="hideToolTip()">'+str.substring(0,9)+'...</p></div>';
                //return '<a  href="real_link"  class="showTitleLeftClass" style=" content=\''+str+'\'">'+str.substring(0,9)+'...</a>';
                return '<div class = "word"><p class="test">'+str+'</p></div>';
            }else{
                return str;
            }

        }else{
            return '';
        }
    }
</script>